<template>
    <div class="page-bar">
        <div class="page-bar-left">
            <slot name="left">
                <a href="javascript:void(0);" @click="leftHandle">
                    <i class="uicon uicon-back"></i>
                </a>
            </slot>
        </div>
        
        <div class="page-bar-middle">
            <slot name="middle"></slot>
        </div>
        <div class="page-bar-right">
            <slot name="right">
                <a href="javascript:void(0);" @click="rightHandle">
                    <i class="uicon uicon-bar-more"></i>
                </a>
            </slot>
        </div>
        

    </div><!-- end page-bar -->
</template>
 
<script>
export default {
    name:'page-bar',
    methods:{
        leftHandle(){
            if(this.$utils.app.isApp){
                location.href = this.$utils.app.link.back;
            }else{
                if(document.referrer == ''){
                    location.href = this.$config.pages.home
                }else{
                    history.back();
                }
                this.$emit('left')
            }
        },
        rightHandle(){
            this.$emit('right')
        }
    }
}
</script>
<style lang="less">
.sticky {
    .page-bar {
        border-bottom:1px solid #efefef;
    }
}
.page-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
    background-color:#fff;
    .page-bar-middle {
        flex:1;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .page-bar-left,
    .page-bar-right {
        min-width: 82px;
        height:100%;
        flex-shrink: 0;
        flex-grow: 0;
       &,&>a,&>.item {
            display: flex;
            justify-content: center;
            align-items: center;
       }
       &>a,&>.item {
            padding:0 30px;
            width:100%;
            height:100%;

            &.header-right {
                padding: 0;
            }
        }
    }
}

</style>
